* {
  margin: 0;
  padding: 0;
}

.img-container {
  margin: 100px auto;
  height: 300px;
  width: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.img-container .img-item {
  box-sizing: border-box;
  transition: 0.5s;
  background-size: 300px 300px;
  background-image: url("../img/A.jpeg");
  background-position: var(--bgX, 0) var(--bgY, 0);
  transform: translate(var(--disX, 0), var(--disY, 0));
}
.img-container:hover .img-item {
  transform: translate(0, 0);
  box-shadow: inset 0 0 0 0 #fff;
}/*# sourceMappingURL=index.css.map */